
<template>
<div class="searchPage">
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content audit-search">
        <ul>
            <li class="mui-input-row">
                <!-- <a class="mui-icon iconfont icon-arrowleft selectRight"></a> -->
                <label>波段:</label>
                <input class="sDemand-details-input" style="margin-top: 0.7rem;float: left;" v-model="band" type="text" placeholder="请输入波段">
            </li>
            <li class="mui-input-row">
                <a class="mui-icon iconfont icon-arrowleft selectRight"></a>
                <label>风格:</label>
                <div class="picker-div" @click="toShow(4)">{{ serachMessage.fgid.text }}</div>
            </li>
            <li class="mui-input-row">
                <a class="mui-icon iconfont icon-arrowleft selectRight"></a>
                <label>分类:</label>
                <div class="picker-div" @click="toShow(2)">{{ serachMessage.dlid.text }} {{ serachMessage.style.text }}</div>
            </li>
            <!-- <li class="mui-input-row">
                <a class="mui-icon iconfont icon-arrowleft selectRight"></a>
                <label>供应商:</label>
               <div class="picker-div" @click="toShow(1)">{{ serachMessage.band.value }}</div>
            </li> -->
             <li class="mui-input-row">
                <a class="mui-icon iconfont icon-arrowleft selectRight"></a>
                <label>年份:</label>
               <div class="picker-div" @click="toShow(3)">{{ serachMessage.year.text }}</div>
            </li>
        </ul>
    </div>
    <div class="search-button">
        <ul>
            <li class="audit-sure">
                <button type="button" class="mui-btn mui-btn-blue" @click="search">查询</button>
            </li>
        </ul>
    </div>
    <vue-pickers
      :show="showPicker"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      :link="link"
      @cancel="close"
      @confirm="confirmFn"></vue-pickers>
</div>    
</template>

<script>
import { mapMutations } from 'vuex'
import API from '@/service/api'
import commonHeader from '@/components/commonHeader.vue'
import vuePickers from 'vue-pickers'
export default {
    components: { commonHeader, vuePickers },
    data() {
        return {
            band: '',
            chooseNow: 1,
            title: '更多查询',
            data: {},
            bandList: [{ text: '全部', value: '-1' }],
            fgList: [{ text: '全部', value: '-1' }],
            cateGoryList: { fatherList: [{ text: '全部', value: '-1' }], childList: {'-1':[{ text: '全部', value: '-1' }]} },
            showPicker: false,
            columns: 1,
            link: false, // 联动必须需要link 参数
            serachMessage:{ fgid:  { text: '全部', value: '-1' }, band: { text: '全部', value: '-1' }, dlid:  { text: '全部', value: '-1' }, style:  { text: '全部', value: '-1' }, year:  { text: '全部', value: '-1' } },
            defaultData: [],
            pickData: {
                // 第一列的数据结构
                data1: []
            }
        }
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING', 'RECORD_SEARCH_VALUE' ] ),
        //初始化数据，并转成选择框需要的
        async initialization() {
            let blist = await API.dic.getBaseBandList({})
            blist.forEach(element => {
                let row = { text: element.Value, value: element.Key }
                this.bandList = [...this.bandList, row]
            });
            let fgList = await API.dic.getStyleList({})
            fgList.forEach(element => {
                let row = { text: element.label, value: element.value }
                this.fgList = [...this.fgList, row]
            });
            let clist = await API.dic.getBaseCateGoryList({})
            clist.forEach(element => {
                let row = { text: element.label, value: element.value }
                this.cateGoryList.fatherList = [...this.cateGoryList.fatherList, row]
                let childList = []   
                element.children.forEach(c => {
                    let childrow = { text: c.label, value: c.value }
                    childList = [...childList, childrow]
                })
                let item = new Object()
                this.cateGoryList.childList[element.value+''] = childList
            })
            this.UPDATE_SHOW_LOADING(false)
        },
        search() {
            let data = new Object()
            data.band= this.band
            // if(this.serachMessage.band.value!='-1')
            //     data.band = this.serachMessage.band.value
            if(this.serachMessage.dlid.value!='-1')
                data.dlid = this.serachMessage.dlid.value
            if(this.serachMessage.style.value!='-1')
                data.style = this.serachMessage.style.value
            if(this.serachMessage.year.value!='-1')
                data.year = this.serachMessage.year.value
            if(this.serachMessage.fgid.value!='-1')
                data.fgid = this.serachMessage.fgid.value
            this.RECORD_SEARCH_VALUE(data)
            this.$router.back()
        },
        close() {
            this.showPicker = false
        },
        //确认选中
        confirmFn(val) {
            this.showPicker = false
            if(this.chooseNow==1){
                this.serachMessage.band = val.select1
            }else if(this.chooseNow == 2 ){
                this.serachMessage.dlid =  val.select1
                this.serachMessage.style =  val.select2
            }else if(this.chooseNow == 3 ){
                this.serachMessage.year =  val.select1
            }else if(this.chooseNow == 4 ){
                this.serachMessage.fgid =  val.select1
            }
        },
        //显示选择框
        toShow(index) {
            this.chooseNow = index
            this.columns = 1
            this.link = false
            if(index == 1){
                this.defaultData = [this.serachMessage.band]
                this.pickData.data1 = this.bandList
            }else if(index == 2 ){//商品分类
                this.columns = 2
                this.link = true
                this.defaultData = [this.serachMessage.dlid, this.serachMessage.style]
                this.pickData.data1 = this.cateGoryList.fatherList
                this.pickData.data2 = this.cateGoryList.childList
            }else if(index == 3){//年份
                this.defaultData = [this.serachMessage.year]
                this.pickData.data1 = [{ text: '全部', value: '-1' }]
                for(let i = 1; i<100; i++) {
                    let j = i
                    if(i<10) 
                        j = `0${i}`
                    let year = `20${j}`
                    this.pickData.data1 = [...this.pickData.data1, { text: year, value: year }]
                }
            }else if(index == 4){
                this.defaultData = [this.serachMessage.fgid]
                this.pickData.data1 = this.fgList
            }
            this.pickData.data1 = this.pickData.data1
            this.showPicker = true
        }
    },
    created() {
       this.initialization()
    }
}
</script>

<style scoped>
.picker-div {
    float: left !important;
    height: 4.4rem;
    line-height: 4.4rem;
    width: 70% !important;
    background-color: transparent;
}
</style>
